<template>
	<div class="main">
		<!-- 轮播图 -->
		<div class="picture">
			<van-swipe
				class="my-swipe"
				:autoplay="3000"
				indicator-color="white"
			>
				<van-swipe-item
					v-for="item in pictureData"
					:key="item"
					class="picture-item"
				>
					<img :src="item.img" alt="" />
				</van-swipe-item>
			</van-swipe>
		</div>
		<!-- 轮播图结束 -->
		<!-- 入口区 -->
		<div class="entrance">
			<van-grid square>
				<van-grid-item
					v-for="item in entranceData"
					:key="item"
					:text="item.text"
					class="entrance-item"
				>
					<img :src="item.url" alt="" />
					<div>{{ item.text }}</div>
				</van-grid-item>
			</van-grid>
		</div>
		<!-- 入口区结束 -->
		<!-- 秒杀区 -->
		<div class="seckill">
			<div class="seckill-header">
				<span>京东秒杀</span>
				<div>
					<van-count-down
						millisecond
						:time="time"
						format="mm:ss:SS"
						class="countDown"
					/>
				</div>
			</div>
			<div class="seckill-main">
				<div v-for="item in seckillList" :key="item">
					<img :src="item.img2" alt="" />
					<div>￥{{ item.originprice }}</div>
				</div>
			</div>
		</div>
		<!-- 秒杀区结束 -->
		<!-- 商品列表 -->
		<div class="commodityList">
			<van-list
				v-model:loading="loading"
				:finished="finished"
				finished-text="没有更多了"
				@load="onLoad"
				class="home-list"
			>
				<div class="commodity-item">
					<div
						v-for="item in commodityData"
						:key="item"
						@click="gotoDetails(item)"
						class="commodity-item-div"
					>
						<div class="commodity-img"><img :src="item.img1" alt="" /></div>
						<div class="commodity-text">
							<p class="commodityName">
								{{ item.proname }}
							</p>
						</div>
						<div class="commodity-money">
							￥{{ item.originprice }}
						</div>
					</div>
				</div>
			</van-list>
			<van-cell />
			<van-back-top right="5vw" bottom="10vh" />
		</div>
		<!-- 商品列表结束 -->
	</div>
</template>
<script setup>
import { ref, onMounted } from "vue"
import { useRouter } from "vue-router"

import {
	getPictures,
	getCommodityList,
	getSeckillList,
} from "../services/index"

const time = ref(60 * 60 * 1000)
// 轮播图
const pictureData = ref([])
// 商品列表
const commodityData = ref([])
// 秒杀列表
const seckillList = ref([])

// 默认选中第一个图标
const count = ref(1)

// 获取轮播图数据
onMounted(async () => {
	const result = await getPictures()
	pictureData.value = result.data.data
	// console.log(result)
	// console.log(pictureData.value)
})

// 商品列表点击事件（前往商品详情页）
const router = useRouter()
const gotoDetails = (id) => {
	// router.push({
	// 	path: "/detail",
	// 	query: {
	// 		id: id,
	// 	},
	// })

	router.push(`/detail/${id.proid}`)
}

// 下拉刷新
// const list = ref([])
const loading = ref(false)
const finished = ref(false)
const onLoad = async () => {
	loading.value = true
	// 获取商品分页列表数据
	const result = await getCommodityList(count.value++, 10)
	commodityData.value.push(...result.data.data)
	// console.log(result)
	loading.value = false

	// window.onscroll = () => {
	// 	const stop = document.documentElement.scrollTop

	// 	console.log(stop)
	// }
}

// 获取秒杀区数据
onMounted(async () => {
	const result = await getSeckillList()
	seckillList.value = result.data.data
	// console.log(result)
})

// console.log(localStorage.getItem('userid'));

// 导航区数据
const entranceData = ref([
	{
		text: "京东超市",
		url: "https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg",
	},
	{
		text: "数码电器",
		url: "https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg",
	},
	{
		text: "京东新百货",
		url: "https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png!q70.jpg",
	},
	{
		text: "京东生鲜",
		url: "https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg",
	},
	{
		text: "京东到家",
		url: "https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg",
	},
	{
		text: "京东超市",
		url: "https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg",
	},
	{
		text: "数码电器",
		url: "https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg",
	},
	{
		text: "京东新百货",
		url: "https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png!q70.jpg",
	},
])
</script>

<style scoped>
.main {
	background-color: #eee;
	/* height: 100vh; */
}
.my-swipe {
	height: 200px;
}
.my-swipe .van-swipe-item {
	color: #fff;
	font-size: 20px;
	line-height: 150px;
	text-align: center;
}
.seckill {
	font-size: 16px;
	font-weight: 600;
	margin-top: 10px;
	padding-bottom: 10px;
}
.seckill-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
	padding: 10px;
}
.countDown {
	color: red;
}
.seckill-main {
	background-color: #fff;
	display: flex;
	justify-content: space-around;
}
.seckill-main div {
	width: 55px;
	height: 100px;
	font-size: 12px;
	text-align: center;
	color: red;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.seckill-main img {
	width: 60px;
	height: 80px;
}
.commodityList {
	padding-top: 15px;
	padding-bottom: 50px;
	background-color: #fff;
}
.van-swipe-item[data-v-5e4cf7ae] {
	line-height: 0px;
}
.picture-item img {
	height: 100%;
	width: 100%;
}
.commodity-item {
	text-align: left;
	display: flex;
	font-size: 15px;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	/* overflow: hidden; */
	background-color: #fff;
	/* border: 1px solid red; */
}
.commodity-item-div{
	border-bottom: 1px solid #eee;
	/* background-color: #eee; */
	width: 100px;
	height: 230px;
	margin-bottom: 10px;
}
.commodity-item div {
	width: 150px;
}
.commodity-item img {
	width: 150px;
	height: 150px;
	border-radius: 10px;
}
.commodity-money {
	color: red;
	padding-bottom: 10px;
}
.entrance-item div {
	padding-top: 10px;
	font-size: 15px;
}
.entrance-item img {
	width: 35px;
	height: 35px;
}
/* .home-list{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
} */
.commodity-text {
	padding: 8px 0;
}
.commodityName {
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-height: 20px;
}
</style>
